import * as echarts from 'echarts'
import {Bar1Params, BarAndLine1Params, Bie1Params, DefaultParams, Line1Params} from './types'
import {EChartsType} from "echarts/types/dist/echarts";
import {ElHasEchartDecorator} from "./ElHasEchartDecorator";

export class EchartsUtils {
  /**
   * 饼图
   */
  @ElHasEchartDecorator()
  static bie1(params: Bie1Params):EChartsType {
    const defaultParams: DefaultParams = {
      titleShow: false,
      showLegend: true,
      formatter: "{b}: {c} ({d}%)"
    }
    params = Object.assign(defaultParams, params)
    const eChartsType = echarts.init(params.el);
    eChartsType.setOption({
      title: {
        show:params.titleShow,
        text: params.titleText,
        left: 'center'
      },
      tooltip: {
        "trigger": "item",
        formatter: params.formatter
      },
      legend: {
        show: params.showLegend,
        orient: 'vertical',
        right: "5%",
        icon: 'roundRect',
        data: params.seriesData
      },
      "series": [{
        "type": "pie",
        "radius": ["45%", "65%"],
        "avoidLabelOverlap": false,
        label: {
          normal: {
            show: true,
            position: 'outside'
          },
          emphasis: {
            show: true
          }
        },
        labelLine: {
          normal: {
            show: true,
          },
          emphasis: {
            show: true
          }
        },
        "data": params.seriesData
      }],
    })
    return eChartsType
  }

  /**
   * 折线图
   */
  @ElHasEchartDecorator()
  static line1(params: Line1Params): EChartsType {
    const defaultParams: DefaultParams = {
      showLegend: true,
      formatter: "{b}: {c} ({d}%)"
    }
    params = Object.assign(defaultParams, params)
    const eChartsType = echarts.init(params.el);
    const xAxisData = params.seriesData.map(i => i.name)
    const series = []
    params.legendItem.forEach((i, index) => {
      // @ts-ignore
      series.push({
        name: i,
        type: "line",
        smooth: false, //是否平滑
        symbolSize: 8,
        zlevel: 3,
        data: params.seriesData.map(i => i['value' + (index + 1)])
      })
    })
    let yAxisNameAppend = '{value}'
    if(params.yAxisNameAppend) {
      yAxisNameAppend = yAxisNameAppend + ' ' + params.yAxisNameAppend
    }
    eChartsType.setOption({
      legend: {
        show: params.showLegend,
        top: 10,
        data: params.legendItem,
        bottom: '0%'
      },
      tooltip: {
        trigger: "axis",
        formatter: params.formatter,
      },
      grid: {
        top: 100,
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        data: xAxisData
      }],
      yAxis: [{
        name: params.yAxisName,
        type: "value",
        splitLine: {
          show: false,
        },
        axisLabel: {
          formatter: yAxisNameAppend
        },
        axisLine: {
          show: true,
        },
        axisTick: {
          show: false
        }
      }],
      series
    })
    return eChartsType
  }

  @ElHasEchartDecorator()
  static bar1(params: Bar1Params): EChartsType {
    const defaultParams: DefaultParams = {
      showLegend: true,
      formatter: "{b}: {c} ({d}%)"
    }
    params = Object.assign(defaultParams, params)
    const eChartsType = echarts.init(params.el);
    const xAxisData = params.seriesData.map(i => i.name)
    const series = []
    params.legendItem.forEach((i, index) => {
      // @ts-ignore
      series.push({
        name: i,
        type: "bar",
        data: params.seriesData.map(i => i['value' + (index + 1)])
      })
    })
    let yAxisNameAppend = '{value}'
    if(params.yAxisNameAppend) {
      yAxisNameAppend = yAxisNameAppend + ' ' + params.yAxisNameAppend
    }
    eChartsType.setOption({
      legend: {
        show: params.showLegend,
        top: 10,
        data: params.legendItem,
        bottom: '0%'
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        },
        formatter: params.formatter,
      },
      grid: {
      },
      xAxis: [{
        type: 'category',
        name: params.xAxisName,
        data: xAxisData
      }],
      yAxis: [{
        name: params.yAxisName,
        type: "value",
        splitLine: {
          show: true
        },
        axisLabel: {
          formatter: yAxisNameAppend
        },
        axisLine: {
          show: true,
        },
        axisTick: {
          show: false
        }
      }],
      series
    })
    return eChartsType
  }


  /**
   * 柱状图+折线图
   */
  @ElHasEchartDecorator()
  static barAndLine1(params: BarAndLine1Params):EChartsType {
    const defaultParams: DefaultParams = {
      showLegend: true,
      formatter: "{b}: {c} ({d}%)"
    }
    params = Object.assign(defaultParams, params)
    const eChartsType = echarts.init(params.el);
    const series = []
    params.legendItem.forEach((i, index) => {
      let yAxisIndex
      if(i === params.yAxisName2) {
        yAxisIndex = index
      }
      if(index < params.indexBar) {
        // @ts-ignore
        series.push({
          name: i,
          type: "bar",
          yAxisIndex,
          barWidth: '20%',
          itemStyle: {
            borderRadius: 7
          },
          data: params.seriesData.map(i => i['value' + (index + 1)])
        })
      } else {
        // @ts-ignore
        series.push({
          yAxisIndex,
          name: i,
          type: "line",
          smooth: false, //是否平滑
          symbolSize: 8,
          data: params.seriesData.map(i => i['value' + (index + 1)])
        })
      }
    })
    const xAxisData = params.seriesData.map(i => i.name)
    let yAxisNameAppend = '{value}'
    if(params.yAxisNameAppend) {
      yAxisNameAppend = yAxisNameAppend + ' ' + params.yAxisNameAppend
    }
    let yAxisNameAppend2 = '{value}'
    if(params.yAxisNameAppend2) {
      yAxisNameAppend2 = yAxisNameAppend2 + ' ' + params.yAxisNameAppend2
    }
    eChartsType.setOption({
      legend: {
        show: params.showLegend,
        top: 10,
        data: params.legendItem,
        bottom: '0%'
      },
      tooltip: {
        trigger: "axis",
        formatter: params.formatter,
      },
      xAxis: [{
        type: "category",
        data: xAxisData,
      }],
      yAxis: [
        {
          name: params.yAxisName,
          type: "value",
          splitLine: {
            show: true
          },
          axisLabel: {
            formatter: yAxisNameAppend
          },
        },
        {
          name: params.yAxisName2,
          type: "value",
          splitLine: {
            show: true
          },
          axisLabel: {
            formatter: yAxisNameAppend2
          },
        }
      ],
      series
    })
    return eChartsType;
  }
}
